<!--
/**
* Author: gqz
* Date: 2021-07-30 15:41
* Desc: ZmInput
*/
-->
<template>
  <view :class="customClass" class="w100p zm-input">
    <u-input
      @click="handleClick"
      @confirm="handleConfirm"
      @input="handleInput"
      @clear="handleClear"
      :custom-style="customStyle"
      :height="height"
      v-model="currentVal"
      :placeholder="placeholder"
      :placeholder-style="placeholderstyle"
      :type="type"
      :clearable="clearable"
      :maxlength="maxlength"
      :disabled="disabled"
      :input-align="inputAlign"
      :border="border"
      :disabled-color="disabledColor"
      :password-icon="passwordIcon"
    >
      <template slot="prefix">
        <slot name="prefix" v-if="($slots && $slots.prefix) || prefixIcon">
          <u-icon
            :name="getImag(prefixIcon)"
            :size="iconSize"
            :custom-style="prefixIconStyle"
          ></u-icon>
        </slot>
      </template>
      <template slot="suffix">
        <slot name="suffix" v-if="($slots && $slots.suffix) || suffixIcon">
          <u-icon
            :name="getImag(suffixIcon)"
            :size="iconSize"
            :custom-style="suffixIconStyle"
          ></u-icon>
        </slot>
      </template>
    </u-input>
  </view>
</template>

<script>
  import styleMixins from '@/mixins/styleMixins'
  import { getOssImg } from '@/utils/index'

  export default {
    name: 'ZmInput',
    mixins: [styleMixins],
    components: {},
    props: {
      placeholder: {
        type: String,
        default: '请输入'
      },
      inputAlign: {
        type: String,
        default: 'left'
      },
      height: { type: String },
      passwordIcon: {
        type: Boolean,
        default: false
      },
      placeholderstyle: { type: Object },
      valueLL: { type: [Number, String] },
      type: {
        type: String
        // 'text' 'select' 'password' 'textarea' 'number' 'tel'
      },
      disabled: { type: Boolean },
      clearable: {
        type: Boolean,
        default: true
      },
      ossUrl: {
        type: Boolean,
        default: true
      },
      maxlength: {
        type: Number,
        default: -1
      },
      disabledColor: {
        type: String
      },
      prefixIcon: {
        type: String
      },
      prefixIconStyle: {
        type: [String, Object]
      },
      suffixIcon: {
        type: String
      },
      border: {
        type: String,
        default: 'surround'
      },
      iconSize: {
        type: String,
        default: '18'
      },
      suffixIconStyle: {
        type: [String, Object]
      }
    },
    data() {
      return {}
    },
    computed: {
      currentVal: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      handleClick(e) {
        this.$emit('click', e)
      },
      handleConfirm(e) {
        this.$emit('confirm', e)
      },
      handleInput(e) {
        this.$emit('input', e)
      },
      handleClear(e) {
        this.$emit('clear', e)
      },
      getImag(src, suffix = 'png') {
        if (this.ossUrl) {
          return getOssImg(src, suffix) || ''
        } else {
          return src
        }
      }
    }
  }
</script>

<style lang="scss"></style>
